<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Safety'})" class="return"></a>
      {{$t('UpdatePwd.v1')}}
		</div>
		<div class="overlay" style="padding: 20px 10px 10px;">
			<div class="overlay-content scrolling" align="center">
				<van-cell-group>
					<van-field :placeholder="$t('UpdatePwd.v2')" maxlength="20" type="password" v-model.trim="oldPwd" />
				</van-cell-group>
				<van-cell-group>
					<van-field :placeholder="$t('UpdatePwd.v3')" maxlength="20" type="password" v-model.trim="newPwd" />
				</van-cell-group>
				<van-cell-group>
					<van-field :placeholder="$t('UpdatePwd.v4')" maxlength="20" type="password" v-model.trim="new2Pwd" />
				</van-cell-group>
				<div class="btn">
					<x-button type="primary" :show-loading="loading" @click.native="sure">{{$t('UpdatePwd.v5')}}</x-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { base, safety } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				oldPwd: '', // 旧密码
				newPwd: '', // 旧密码
				new2Pwd: '', // 旧密码
				k: '', // 凭证K值
				v: '', // 凭证V值
				loading: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {

		},
		methods: {
			sure() {
				if(this.oldPwd == '') {
					Toast(this.$t('UpdatePwd.v6'));
					return false;
				}
				if(this.oldPwd.length < 6 || this.oldPwd.length > 20) {
					Toast(this.$t('UpdatePwd.v7'));
					return false;
				}
				if(this.newPwd == '') {
					Toast(this.$t('UpdatePwd.v8'));
					return false;
				}
				if(this.newPwd.length < 6 || this.newPwd.length > 20) {
					Toast(this.$t('UpdatePwd.v9'));
					return false;
				}
				if(this.newPwd != this.new2Pwd) {
					Toast(this.$t('UpdatePwd.v10'));
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						safety.getUpdatePassword({
							'key': this.k,
							'encryptedData': this.rsaEncrypt(this.oldPwd + ',' + this.newPwd + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.loading = false;
									base.getSignOut().then(res => {
										sessionStorage.clear();
										localStorage.clear();
										_this.axios.defaults.headers['Authorization'] = '';
										Toast({
											duration: 1000,
											message: res.msg
										});
										_this.$router.push({
											path: '/Login'
										});
									})
								}, 500);
							} else if(res.code == 500) {
								this.loading = false;
							}
							Toast(res.msg);
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.head~.overlay {
		top: 44px;
	}

	.van-cell {
		background-color: #333952;
		color: #FFFFFF;
		font-size: 15px;
		padding: 15px;
	}

	[class*=van-hairline] {
		position: unset;
		border-bottom: 2px solid #2c3145;
	}

	/deep/ .weui-btn_primary {
		background: #3fb776 !important;
	}

	.van-hairline--top-bottom::after {
		border: 0;
	}

	.btn {
		padding: 30px 10px 0px;
	}

	/deep/ .van-field__control {
		color: #FFFFFF;
	}

	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: rgba(244, 244, 244, 0.3) !important;
	}

	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: rgba(244, 244, 244, 0.3) !important;
	}
</style>
